<!--
 * @Descripttion: 查看数据
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-05-12 10:20:09
-->
<template>
  <div class="lb-sys-sproconfig">
    <top-nav :title="navTitle" :isBack="true"></top-nav>

    <div class="space-lg"></div>
    <div class="flex-warp" style="background:#f4f6f8;">
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconchakanshenqing"></i>浏览总次数
          <lb-tool-tips padding="0">当前视频所产生的实际浏览次数（不包含虚拟基数）</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.browse_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconqiepian"></i>浏览总人数
          <lb-tool-tips padding="0">当前视频所累计的视频观看总人数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.browse_user || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconkehu_"></i>获客总次数
          <lb-tool-tips padding="0">当前视频产生的所有实际获客总次数（不包含虚拟基数）</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.visitor_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconkehu"></i>获客总人数
          <lb-tool-tips padding="0">当前视频累计的获客总人数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.visitor_user || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconzhuanfa1"></i>转发总次数
          <lb-tool-tips padding="0">当前视频累计的转发总次数（不包含虚拟基数）</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.send_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconzuzhijiagou"></i>转发总人数
          <lb-tool-tips padding="0">当前视频累计的转发总人数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.send_user || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont icondianming"></i>商品点击总次数
          <lb-tool-tips padding="0">当前视频关联商品的累计被点击总次数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.goods_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconrenyuanzhuangtai"></i>商品点击总人数
          <lb-tool-tips padding="0">当前视频关联商品所累计的点击总人数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.goods_user || 0}}</div>
      </div>
    </div>

    <div class="space-lg"></div>

    <div class="page-main" style="padding-top:0">
      <div class="lb-top-nav">
        <div
          @click="changeTabInd('staff')"
          class="nav-item"
          :class="[{'nav-item-active': tabActiveIndex === 'staff'}]"
        >员工</div>
        <div
          @click="changeTabInd('client')"
          class="nav-item"
          :class="[{'nav-item-active': tabActiveIndex === 'client'}]"
        >客户</div>
      </div>
      <div style="height:30px"></div>

      <div v-if="tabActiveIndex === 'staff'">
        <div class="page-search-form">
          <el-form :inline="true" :model="searchForm.staff" ref="searchStaffForm">
            <el-form-item label="输入查询" prop="name">
              <el-input v-model="searchForm.staff.name" placeholder="员工姓名/昵称"></el-input>
            </el-form-item>
            <el-form-item label="" prop="company">
              <el-cascader
                v-model="searchForm.staff.company"
                collapse-tags
                :options="base_company"
                @change="choiceAllCompanyItem"
                :props="{ multiple: true,checkStrictly:true, label:'name',value:'id'}"
                :placeholder="searchForm.staff.company.length < 1 ? '请选择所属公司/部门' : ''"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="job">
              <el-select v-model="searchForm.staff.job" filterable clearable placeholder="请选择职位">
                <el-option
                  v-for="item in jobList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <lb-button
              size="medium"
              type="primary"

              icon="el-icon-search"
              style="margin-right:10px"
              @click="getTableDataList(1)"
            >{{$t('action.search')}}</lb-button>
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              @click="resetForm('searchStaffForm')"
              style="margin-right:0px"
            >{{$t('action.reset')}}</lb-button>
          </el-form>
        </div>

        <el-table
          v-loading="loading"
          :data="tableData.staff"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          style="width: 100%"
          @sort-change="changeSort"
        >
          <el-table-column prop="fans_id" label="ID"></el-table-column>
          <el-table-column prop="avatar" label="头像">
            <template slot-scope="scope">
              <lb-image :src="scope.row.avatar" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="nickName" label="昵称"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="top_company_name" label="所属公司"></el-table-column>
          <el-table-column prop="company_name" label="所属部门"></el-table-column>
          <el-table-column prop="job_name" label="职位"></el-table-column>
          <el-table-column prop="visitor_user" label="获客人数" width="100" sortable="custom"></el-table-column>
          <el-table-column prop="browse_user" label="浏览人数" width="100" sortable="custom"></el-table-column>
          <el-table-column prop="browse_time" label="浏览时长" width="100" sortable="custom"></el-table-column>
          <el-table-column prop="send_user" label="转发人数" width="100" sortable="custom"></el-table-column>
        </el-table>

        <lb-page
          :batch="false"
          :page="searchForm.staff.page"
          :pageSize="searchForm.staff.limit"
          :total="total.staff"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></lb-page>
      </div>

      <div v-if="tabActiveIndex === 'client'">
        <div class="page-search-form">
          <el-form :inline="true" :model="searchForm.client" ref="searchClientForm">
            <el-form-item label="输入查询" prop="name">
              <el-input v-model="searchForm.client.name" placeholder="客户昵称"></el-input>
            </el-form-item>
            <lb-button
              size="medium"
              type="primary"

              icon="el-icon-search"
              @click="getTableDataList(1)"
            >{{$t('action.search')}}</lb-button>
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              @click="resetForm('searchClientForm')"
              style="margin-right:0px"
            >{{$t('action.reset')}}</lb-button>
          </el-form>
        </div>

        <el-table
          v-loading="loading"
          :data="tableData.client"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          style="width: 100%"
          @sort-change="changeSort"
        >
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="avatarUrl" label="头像">
            <template slot-scope="scope">
              <lb-image :src="scope.row.avatarUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="昵称"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="browse_count" label="浏览次数" sortable="custom"></el-table-column>
          <el-table-column prop="browse_time" label="浏览时长" sortable="custom"></el-table-column>
          <el-table-column prop="send_count" label="转发次数" sortable="custom"></el-table-column>
        </el-table>

        <lb-page
          :batch="false"
          :page="searchForm.client.page"
          :pageSize="searchForm.client.limit"
          :total="total.client"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></lb-page>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: 0,
      navTitle: '',
      tabActiveIndex: 'staff',
      base_company: [],
      companyResult: [],
      form: {
        copyCompanyId: []
      },
      total: {
        staff: 0,
        client: 0
      },
      loading: false,
      searchForm: {
        staff: {
          video_id: '',
          type: 1,
          name: '',
          job: '',
          order: '',
          by: '',
          company: [],
          page: 1,
          limit: 10
        },
        client: {
          video_id: '',
          type: 2,
          name: '',
          page: 1,
          limit: 10
        }
      },
      tableData: {
        staff: [],
        client: []
      },
      jobList: [],
      count: {}
    }
  },
  activated () {
    let { id } = this.$route.query
    this.getBaseCompany()
    this.getBaseJobList()
    if (id) {
      this.id = id
      this.searchForm.staff.video_id = id
      this.searchForm.client.video_id = id
      this.getCount(id)
      this.getTableDataList()
    }
  },
  methods: {
    async getCount (id) {
      let { data: count } = await this.$api.shortvideoVideo({ video_id: id })
      this.count = count
      this.navTitle = `“${count.title}”查看数据`
    },
    async getBaseJobList () {
      let { data: jobList } = await this.$api.getBaseJobList()
      this.jobList = jobList
    },
    async getBaseCompany () {
      let { data: company } = await this.$api.getBaseCompany()
      this.handleCompanyOptions(company)
      this.base_company = company
    },
    handleCompanyOptions (data, arr = []) {
      for (let i = 0, len = data.length; i < len; i++) {
        let newArr = JSON.parse(JSON.stringify(arr))
        newArr.push(data[i].id)
        this.companyResult.push(JSON.parse(JSON.stringify(newArr)))
        if (data[i].children && data[i].children.length) {
          this.handleCompanyOptions(data[i].children, newArr)
        }
      }
    },
    /**
     * @method 全选公司
     */
    choiceAllCompanyItem (val) {
      let { companyResult } = this
      // true = 添加  false 取消、减少
      let rType = val.length > this.form.copyCompanyId.length
      let firstVal = val[0] && val[0][0]
      if (rType) {
        // 添加
        if (firstVal && val.length === companyResult.length) {
          // 其他都选完了，就只有全选没选了
          this.searchForm.staff.company = [[0], ...val]
        } else if (firstVal === 0) {
          this.searchForm.staff.company = [[0], ...companyResult]
        }
      } else {
        // 减少
        if (firstVal === 0) {
          // 第一个为0 只取消全选
          let copyArr = JSON.parse(JSON.stringify(val))
          copyArr.splice(0, 1)
          this.searchForm.staff.company = copyArr
        } else if (val.length === companyResult.length) {
          // 清空
          this.searchForm.staff.company = []
        } else {
          this.searchForm.staff.company = val
        }
      }
      this.form.copyCompanyId = this.searchForm.staff.company
    },
    handleSizeChange (val) {
      let { tabActiveIndex } = this
      this.searchForm[tabActiveIndex].limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      let { tabActiveIndex } = this
      this.searchForm[tabActiveIndex].page = val
      this.getTableDataList()
    },
    changeSort (val) {
      let { order, prop } = val
      let { tabActiveIndex } = this
      this.searchForm[tabActiveIndex].order = prop
      this.searchForm[tabActiveIndex].by =
        order === 'ascending' ? 'asc' : 'desc'
      this.handleCurrentChange(1)
    },
    async getTableDataList (flag) {
      let { tabActiveIndex } = this
      if (flag) this.searchForm[tabActiveIndex].page = 1
      this.loading = true
      let searchForm = this.searchForm[tabActiveIndex]
      let { code, data } = await this.$api.shortvideoUserList(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData[tabActiveIndex] = data.data
      this.total[tabActiveIndex] = data.total
    },
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    changeTabInd (status) {
      this.tabActiveIndex = status
      this.handleCurrentChange(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 100%;
}
.el-input,
.el-select {
  width: 200px;
}
.el-cascader {
  width: 300px;
}

.lb-top-nav {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  white-space: nowrap;
  .nav-item {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    cursor: pointer;
    &::after {
      position: absolute;
      content: "";
      width: 0%;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 0px;
      background: $themeColor;
      transform: all 0.3 linear;
    }
  }
  .nav-item-active {
    color: $themeColor;
    position: relative;
    &::after {
      width: 90%;
      height: 2px;
    }
  }
}

.space-lg {
  width: 100%;
  height: 20px;
  background: #f4f6f8;
}

.flex-warp {
  display: flex;
  flex-wrap: wrap;
}

.flex-y-center {
  display: flex;
  align-items: center;
}
.count-item {
  width: 23.5%;
  height: 165px;
  background: white;
  margin-left: 2%;
  padding: 20px;
  .iconfont{
    color: #7094FA;
    font-size: 16px;
    margin-right: 10px;
  }
  .tool-tips {
    margin-top: 0px;
    padding-top: 0px;
    flex: 1;
    color:#666
  }
  .manage-num{
    margin-top: 5px;
  }
}
.count-item:nth-child(1) {
  margin-left: 0;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.count-manage {
  width: 30%;
  height: 320px;
  margin-right: 20px;
  background: white;
  padding: 20px 0 0 20px;
  .manage-title {
    font-size: 14px;
    color: #333;
    margin-top: 9px;
    margin-bottom: 50px;
  }
  .manage-item {
    width: 50%;
    height: 100px;
    display: inline-block;
    float: left;
  }
}
.manage-text {
  font-size: 13px;
  color: #999999;
}
.manage-num {
  font-size: 20px;
  color: #333;
}
.manage-today {
  font-size: 10px;
  color: #3388ff;
}

</style>
